<!-- zTree -->
<SCRIPT type='text/javascript' src="${base}/js/ztree/js/jquery.ztree.core-3.4.min.js"></SCRIPT>
<SCRIPT type='text/javascript' src="${base}/js/ztree/js/jquery.ztree.exedit-3.4.min.js"></SCRIPT>
<SCRIPT type='text/javascript' src="${base}/js/ztree/js/jquery.ztree.excheck-3.4.min.js"></SCRIPT>
<link rel="stylesheet" type="text/css" href="${base}/js/ztree/css/zTreeStyle/zTreeStyle.css">

<script type="text/javascript">
//beforeDrag拖动前beforeDrop放下前
	j(function(){
		j.fn.zTree.init(j("#notRelatedUsers"), setting, notRelatedUsersNodes);
		j.fn.zTree.init(j("#relatedUsers"), setting, relatedUsersNodes);
	})
	var setting = {
		edit: {
			enable: true,
			showRemoveBtn: false,
			showRenameBtn: false
		},
		data: {
			simpleData: {
				enable: true,
				idKey: "id",
				pIdKey: "pId",
				rootPId: 0
			}
		},
		callback: {
			beforeDrag:beforeDrag,
			beforeDrop:beforeDrop,
			beforeClick:beforeClick
		}
	};	
	

	
	var notRelatedUsersNodes =[
		{ id:0,name:"未被关联的用户",open:true,icon:"${base}/images/lock.gif",tuodong:false,fangzhi:true}<#if notBackroles?exists && notBackroles?size gt 0>,</#if>          
   	    <#if notBackroles?exists && notBackroles?size gt 0>
   	    	<#list notBackroles as notBackrole>
   				{ id:${notBackrole.id?if_exists},pId:0,name:"${notBackrole.loginName}(${notBackrole.nickname})",icon:"${base}/images/user.gif",tuodong:true,fangzhi:true}<#if notBackrole_has_next>,</#if>
   	 		</#list>
   		</#if>
	];
	
	var relatedUsersNodes =[
		{ id:0,name:"已被关联的用户",open:true,icon:"${base}/images/lock.gif",tuodong:false,fangzhi:true}<#if backroles?exists && backroles?size gt 0>,</#if>          
   	    <#if backroles?exists && backroles?size gt 0>
	    	<#list backroles as backrole>
				{ id:${backrole.id?if_exists},pId:0,name:"${backrole.loginName}(${backrole.nickname})",icon:"${base}/images/user.gif",tuodong:true,fangzhi:true}<#if backrole_has_next>,</#if>
	 		</#list>  		 
   	    </#if>
	];
	
	function beforeDrag(treeId, treeNodes) {
		for (var i=0,l=treeNodes.length; i<l; i++) {
			if (treeNodes[i].tuodong === false) {
				return false;
			}
		}
		return true;
	}
	function beforeDrop(treeId, treeNodes, targetNode, moveType) {
		if(targetNode==null){
			return false;
		}else if(!targetNode.fangzhi){
			return false;
		}else if(targetNode.id==0 && (moveType=="prev"||moveType=="next")){
			return false;
		}else if(targetNode.id!=0 && moveType=="inner"){
			return false;
		}
		return true;
	}
	
	function relationUserRight(){
		var leftTree = j.fn.zTree.getZTreeObj("notRelatedUsers");
		var leftNodes = leftTree.getSelectedNodes();
		var rightTree = j.fn.zTree.getZTreeObj("relatedUsers");
		rightTree.addNodes(rightTree.getNodes()[0], leftNodes);
		for(var i=0;i<leftNodes.length;i++){
			leftTree.removeNode(leftNodes[i]);
		}
		
	}
	
	function relationUserLeft(){
		var rightTree = j.fn.zTree.getZTreeObj("relatedUsers");
		var rightNodes = rightTree.getSelectedNodes();
		var leftTree = j.fn.zTree.getZTreeObj("notRelatedUsers");
		leftTree.addNodes(leftTree.getNodes()[0], rightNodes);
		for(var i=0;i<rightNodes.length;i++){
			rightTree.removeNode(rightNodes[i]);
		}
	}
	
	function beforeClick(treeId, treeNode, clickFlag) {
		if(treeNode.id==0){
			return false;
		}
		return true;
	}
	
	function searchTree(){
		var divStr=j("#p1 input[name='div']:checked").val();
		var tree = j.fn.zTree.getZTreeObj(divStr);
		tree.cancelSelectedNode();
		var name=j.trim(j("#userNameNode").val());
		if(name.length==0){
			return;
		}
		var nodes=tree.getNodesByParamFuzzy("name",name, null);
		for(var i=0;i<nodes.length;i++){
			tree.selectNode(nodes[i],true);
		}
	}
	
	function clearTree(){
		var divStr=j("#p1 input[name='div']:checked").val();
		var tree = j.fn.zTree.getZTreeObj(divStr);
		tree.cancelSelectedNode();
	}
	
	function updateRoleUsers(){
		var buStr="";
		var rightTree = j.fn.zTree.getZTreeObj("relatedUsers");
		var rightTreeNodes=rightTree.transformToArray(rightTree.getNodes());
		for(var i=1;i<rightTreeNodes.length;i++){
			buStr+=rightTreeNodes[i].id+",";
		}
		if(buStr.length >0 ){
			buStr=buStr.substring(0,buStr.length-1)
		}
		j("#backUsersStr").val(buStr);
		j("#F1").submit();
	}
</script>

<div class="container">
	<div class="masage_tittle">【${role.name}】角色关联用户<span style="font-weight: bold;font-size: 14px;color:#555555;margin-left: 10px">(可以直接用Ctrl进行 多选&拖动 操作)</span></div><div class="clear"></div><br>

	<div style="margin-left: 35px;font-size: 13px">
		<p class="sdamin_1">用户名:</p><input type="text" value="" class="Text_01" id="userNameNode" >
		
		<p id="p1">
			<input type="radio" name="div" value="notRelatedUsers" checked="checked">未被关联的用户 <input type="radio" name="div" value="relatedUsers"> 已被关联的用户
			<input type="button" style="background: url('${base}/images/button/ls05.gif');width: 53px;height: 22px;cursor: pointer;border:0 none" value="" onclick="searchTree()">
			<input type="button" style="background: url('${base}/images/button/ls06.gif');width: 53px;height: 22px;cursor: pointer;border:0 none" value="" onclick="clearTree()">
		</p>
	</div><div class="clear"></div>
	
	<div style="margin-top: 15px">
	
		<div id="d1" style="float: left;margin-left:35px;border:2px solid #0099CC;width: 400px;height:atuo;">
			<ul id="notRelatedUsers" class="ztree"></ul>
		</div>
		
		<div style="float:left;margin-left:20px;display:inline;">
			<img src="${base}/images/button/youbianqu.jpg" style="cursor: pointer;" alt="将未被关联用户关联" title="将未被关联用户关联" onclick="relationUserRight()"><br><br><br>
			<img src="${base}/images/button/zuobianqu.jpg" style="cursor: pointer;" alt="取消已经被关联用户" title="取消已经被关联用户" onclick="relationUserLeft()">
		</div>
		
		<div id="d2" style="float: left;margin-left:20px;border:2px solid #0099CC;width: 400px;height:auto;">
			<ul id="relatedUsers" class="ztree"></ul>
		</div>
		<div class="clear"></div>
		
		<div style="margin-top: 10px;cursor: pointer;">
			<img src="${base}/images/button/Activity_22.gif" onclick="updateRoleUsers()">
		</div>
		
		<form style="display: none" action="oneRoleRalationBackUsersUpdate.action" id="F1">
			<input name="role.id" value="${role.id}">
			<input id="backUsersStr" name="backUsersStr">
		</form>
	</div>
	
</div>